<template>
  <div class="index-content" id="my">
    <div class="banner">
      <div class="footerdw" v-for="(v,i) in img " :key="i">
        <div class="left">
          <h3 v-if="i==n">{{v.title}}</h3>
          <p v-if="i==n">{{v.des}}</p>
          <div class="btn" v-if="i==n">查看详情</div>
        </div>
        <div class="right">
          <img :src="v.url" v-show="i==n" />
          <div class="banner-circle" v-show="i==n" >
            <ul>
              <li v-for="(v,i) in img " @click="handle(i)" :key="i" :class="i==n ?'selected':''">
                
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timer:null,
      img: [
        {
          id: 0,
          title: "我是图片标题1",
          des:
            "111111111111我是详细的描述我是详细的描述我是详细的描述我是详细的描1我是详细的描述我是详细的描述我是详细的描述我1我是详细的描述我是详细的描述我是详细的1我是详细的描述我是详细的描述我是详细的1我是详细的描述我是详细的描述我是详细的描述我是详细的描述我是详细的描述我是详细的描述我是详细的描述我是详细的描述述我是详细的描述我是详细的描述我是详细的描述我是详细的描述我是详细的描述描述我是详细的描述我是详细的描述我是详细的描述我是详细的描述我是详细的描述是详细的描述我是详细的描述我是详细的描述我是详细的描述我是详细的描述述我是详细的描述我是详细的描述我是详细的描述我是详细的描述",
          url:
            "https://tse3-mm.cn.bing.net/th/id/OIP.w-HVQf5osk_axcB5fV6Q_wHaE8?w=265&h=180&c=7&o=5&dpr=2&pid=1.7",
        },
        {
          id: 1,
          title: "我是图片标题2",
          des:
            "222222222222我是详细的描述我是详细的描述我是详细的描述我是详细的描述我是详细的描述我是详细的描述我是详细的描述我是详细的描述",

          url:
            "https://tse3-mm.cn.bing.net/th/id/OIP.uCDOIedi17gpNpBLxjG1ZwHaEB?w=324&h=180&c=7&o=5&dpr=2&pid=1.7",
        },
        {
          id: 2,
          title: "我是图片标题3",
          des:
            "333333333333我是详细的描述我是详细的描述我是详细的描述我是详细的描述我是详细的描述我是详细的描述我是详细的描述我是详细的描述",

          url:
            "https://tse3-mm.cn.bing.net/th/id/OIP.GK0pIVJSDTbLngPiFgQhxQHaDt?w=323&h=174&c=7&o=5&dpr=2&pid=1.7",
        },
        {
          id: 3,
          title: "我是图片标题4",
          des:
            "444444444444444我是详细的描述我是详细的描述我是详细的描述我是详细的描述我是详细的描述我是详细的描述我是详细的描述我是详细的描述",

          url:
            " https://tse2-mm.cn.bing.net/th/id/OIP.kkatSw2LL9mL5bT15_fR-AHaE8?w=282&h=185&c=7&o=5&dpr=2&pid=1.7",
        },
      ],

      n: 0,
    };
  },
  //生命周期 - 创建完成
  created() {},

  //DOM挂载完毕
  mounted() {
    this.fun();
  },
  methods: {
    handle(index) {
      //   console.log(index)
      clearInterval(this.timer)
      this.n = index;
      this.fun()
    },
    fun: function () {
      //setInterval(函数体,时间)
      this.timer=setInterval(this.play, 4000);
    },
    play: function () {
      this.n++;
      if (this.n == this.img.length) {
        this.n = 0;
      }
    },
  },
};
</script>

<style lang='less' scoped>
// * {
//   margin: 0;
//   padding: 0;
// }
// ul {
//   list-style-type: none;
// }
// body {
//   font-size: 14px;
//   background: #fff;
//   overflow-y: scroll;
//   overflow-x: hidden;
// }
// html,
// body {
//   max-width: 720px;
//   height: 100%;
//   margin: 0 auto;
// }

/*index*/
.content {
  height: 100%;
}

.index-content .banner {
  position: relative;
  width: 100%;
  height: 300px;

}

.index-content .banner .banner-circle li {
  cursor: pointer;
  //   display: flex;
  //   justify-content: space-between;
  //   align-items: center;
  display: inline-block;
  background: #698;
  width: 16px;
  height: 16px;
  border-radius: 8px;
//   font-size: 12px;
  margin-left: 8px;
  //   border-radius: 50%;
  //   padding: 5px;
  //   margin: 2px;
}

.footerdw {
  display: flex;
  .left {
    flex: 3;
    padding-left: 30px;
    padding-right: 100px;
    h3 {
      margin-top: 40px;
      font-size: 24px;
      color: #fff;
    }
    p {
      margin-top: 35px;
      color: #ee7e8b;
      font-size: 14px;
      line-height: 24px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
    }
    .btn {
      cursor: pointer;
      margin-top: 30px;
      width: 100px;
      height: 38px;
      border: 1px solid #fff;
      color: #fbfbfb;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
    }
  }
  .right {
    flex: 2;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;

    img {
      margin-top: 25px;
      width: 480px;
      height: 250px !important;
    }
    .banner-circle{
        position: absolute;
        bottom: 15px;
        left: 50%;
        transform: translate(-50%,0);
    }

  }
}

.index-content.banner .banner-circle ul {
  padding-right: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  height: 46px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}
.index-content .banner .banner-circle .selected {
  background: #92d85c;
  width: 28px !important;
}

/*index-category*/
.index-content .index-category {
  margin-top: 5%;
}
.index-content .index-category .category {
  width: 50%;
  float: left;
  text-align: center;
}
.index-content .index-category .category .iconfont {
  font-size: 40px;
  display: inline-block;
  padding: 10%;
  border-radius: 50%;
  color: #fff;
  border: 3px solid #f9f9f9;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5);
}
.index-content .index-category .category .iconfont {
  background: #92d85c;
}
.index-content .index-category .category:nth-child(2) .iconfont {
  background: #f60;
}
.index-content .index-category .category:nth-child(4) .iconfont {
  background: #f00;
}
.index-content .index-category .category label {
  display: block;
  padding: 10% 0;
  color: #999;
}
/*index-category end*/
</style>
